<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>还书模式</title>
</head>
<style>
    body{
        padding: 0;
        margin: 0;
    }
    .main{
        width: 400px;
        height: 500px;
        margin: 0 auto;
        border: 1px solid lavender;
    }
    .main .top{
        width: 400px;
        height: 100px;
        background-color: royalblue;
        text-align: center;
    }
    .main .top >span{
        font-family: 微软雅黑;
        font-size: 40px;
        color: white;
        line-height: 100px;
    }
    .main .center{
        width: 400px;
        height: 200px;
        text-align: center;
        background-color: cornflowerblue;
    }
    .main .center .user{
        padding-top: 50px;
    }
    .main .center .user,.cbs,.price{
        width: 400px;
        height: 50px;
        line-height: 50px;
        font-family: 微软雅黑;
        font-size: 20px;
    }
    .main .foot{
        background-color: cornflowerblue;
        width: 400px;
        height: 200px;
        text-align: center;
    }
    .main .foot >input{
        margin-top: 50px;
        width: 90px;
        height: 25px;
    }
</style>
<body>

<div class="main">
    <div class="top">
        <span>还书模式</span>
    </div>
    <div class="center">
        <div class="user">
            图书编号 ：<input type="text">
        </div>
        <div class="cbs">
            &nbsp;  &nbsp; &nbsp;&nbsp; 卡号：<input type="text">
        </div>
    </div>
    <div class="foot">
        <input type="submit" value="保存">
        <input type="submit" value="重置">
        <input type="submit" value="退出">
    </div>
</div>
</body>
</html>